<template>
  <div :class="['el-col', classList]" :style="styles">
    <slot></slot>
  </div>
</template>
<script>
export default {
  props: {
    span: {
      default: 24,
      type: Number,
    },
    offset: {
      default: 0,
      type: Number,
    },
    push: {
      default: 0,
      type: Number,
    },
    pull: {
      default: 0,
      type: Number,
    },
    xs: [Number, Object],
    sm: [Number, Object],
    md: [Number, Object],
    lg: [Number, Object],
    xl: [Number, Object],
  },
  computed: {
    gutter() {
      let parent = this.$parent;
      while (parent && parent.$options.name !== 'ElRow') {
        parent = parent.$parent;
      }
      return parent ? parent.gutter : 0;
    },
    styles() {
      const styles = {};
      if (this.gutter) {
        styles.paddingLeft = `${this.gutter / 2}px`;
        styles.paddingRight = styles.paddingLeft;
      }

      return styles;
    },
    classList() {
      const classList = [];

      /**
       *  prop就是四个属性中的一个  this[prop]就是这个prop具体的值
       * 不这样做的话，如果prop的值为0  会出现el-col-push-0的类  而且他的样式是marginLeft:0%;
       * 由于left的权重高于right  那么样式是marginRight[el-col-pull]的就不生效了 所以如果prop的值为0 不应该添加为类
       * 又因为span和其他三个属性的名字有点区别  所以classList push的时候做一点小判断
       */
      ['span', 'push', 'pull', 'offset'].forEach((prop) => {
        if (this[prop]) {
          classList.push(
            prop === 'span'
              ? `el-col-${this[prop]}` : `el-col-${prop}-${this[prop]}`,
          );
        }
      });
      ['xs', 'sm', 'md', 'lg', 'xl'].forEach((size) => {
        if (typeof this[size] === 'number') {
          classList.push(
            `el-col-${size}-${this[size]}`,
          );
        } else if (typeof this[size] === 'object') {
          const props = this[size];
          Object.keys(props).forEach((prop) => {
            classList.push(
              prop === 'span'
                ? `el-col-${size}-${props[prop]}`
                : `el-col-${size}-${prop}-${props[prop]}`,
            );
          });
        }
      });
      return classList;
    },
  },
};

</script>

<style scoped lang="scss">

.el-col{
    box-sizing: border-box;
    float: left;
}
@for $i from 0 through 24 {
  .el-col-#{$i} {
    width: $i / 24 * 100%;
  }
  .el-col-offset-#{$i} {
    margin-left: $i / 24 * 100%;
  }
  .el-col-push-#{$i} {
    position: relative;
    left: $i / 24 * 100%;
  }
  .el-col-pull-#{$i} {
    position: relative;
    right: $i / 24 * 100%;
  }
}
@media only screen and (max-width:768px-1) {
  @for $i from 0 through 24 {
    .el-col-xs-0{

      display: none;
    }
    .el-col-xs-#{$i} {
      width: $i / 24 * 100%;
    }

    .el-col-xs-offset-#{$i} {
      margin-left: $i / 24 * 100%;
    }

    .el-col-xs-push-#{$i} {
      position: relative;
      left: $i / 24 * 100%;
    }

    .el-col-xs-pull-#{$i} {
      position: relative;
      right: $i / 24 * 100%;
    }
  }
}
// sm
@media only screen and (min-width:768px) {
  @for $i from 0 through 24 {
    .el-col-sm-0{
      display: none;
    }
    .el-col-sm-#{$i} {
      width: $i / 24 * 100%;
    }

    .el-col-sm-offset-#{$i} {
      margin-left: $i / 24 * 100%;
    }

    .el-col-sm-push-#{$i} {
      position: relative;
      left: $i / 24 * 100%;
    }

    .el-col-sm-pull-#{$i} {
      position: relative;
      right: $i / 24 * 100%;
    }
  }
}
@media only screen and (min-width:992px) {
  @for $i from 0 through 24 {
    .el-col-md-0{
      display: none;
    }
    .el-col-md-#{$i} {
      width: $i / 24 * 100%;
    }

    .el-col-md-offset-#{$i} {
      margin-left: $i / 24 * 100%;
    }

    .el-col-md-push-#{$i} {
      position: relative;
      left: $i / 24 * 100%;
    }

    .el-col-md-pull-#{$i} {
      position: relative;
      right: $i / 24 * 100%;
    }
  }
}
@media only screen and (min-width:1200px) {
  @for $i from 0 through 24 {
    .el-col-lg-0{
      display: none;
    }
    .el-col-lg-#{$i} {
      width: $i / 24 * 100%;
    }

    .el-col-lg-offset-#{$i} {
      margin-left: $i / 24 * 100%;
    }

    .el-col-lg-push-#{$i} {
      position: relative;
      left: $i / 24 * 100%;
    }

    .el-col-lg-pull-#{$i} {
      position: relative;
      right: $i / 24 * 100%;
    }
  }
}
@media only screen and (min-width:1920px) {
  @for $i from 0 through 24 {
    .el-col-xl-0{
      display: none;
    }
    .el-col-xl-#{$i} {
      width: $i / 24 * 100%;
    }

    .el-col-xl-offset-#{$i} {
      margin-left: $i / 24 * 100%;
    }

    .el-col-xl-push-#{$i} {
      position: relative;
      left: $i / 24 * 100%;
    }

    .el-col-xl-pull-#{$i} {
      position: relative;
      right: $i / 24 * 100%;
    }
  }
}

</style>
